<template>
  <div class="workbench-box">
    <div class="workbench">
      <div class="action-box">
        <a-button
          type="primary"
          @click="custom"
          size="small"
          class="action-button"
        >
          <template #icon>
            <InsertRowAboveOutlined title="自定义列显示" />
          </template>
          自定义显示
        </a-button>
      </div>
      <a-row :gutter="[8, 8]">
        <a-col
          :span="24"
          v-show="getModuleShow('census_1')"
          :order="getModuleOrder('census_1')"
        >
          <a-row :gutter="[8, 8]">
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                  <span style="flex: 1"> 管理面积 </span>
                  <span>
                        <a-dropdown
                          :trigger="['click']"
                          v-model:visible="colVisible"
                          @visibleChange="handleColVisibleChange"
                          :getPopupContainer="(triggerNode) => triggerNode?.parentNode"
                        >
                          <UnorderedListOutlined title="自定义列显示" />
                          <template #overlay>
                            <a-menu>
                              <a-checkbox-group
                                v-model:value="buildList"
                                @change="onCheckItemChange"
                              >
                                <a-menu-item
                                  v-for="item of columnsData"
                                  :key="item.key"
                                >
                                  <a-checkbox
                                    :value="item.key"
                                    :disabled="item.key == buildDisabled"
                                  >
                                    {{ item.name }}
                                  </a-checkbox>
                                </a-menu-item>
                              </a-checkbox-group>
                            </a-menu>
                          </template>
                        </a-dropdown>
                      </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 82px;
                        font-size: 20px;
                      "
                >
                  {{ ManagementArea.totalArea }} m²
                </div>
                <div
                  style="width: 100%; padding: 0 5px; margin-bottom: 10px"
                >
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  总{{ $L("房源") }}数量: {{ ManagementArea.totalCount }} 间
                </div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                  <span style="flex: 1"> 全年退租合同 </span>
                  <!-- <span>
                <a-select
                  v-model:value="selectValue"
                  style="width: 120px; margin-right: 10px"
                  :options="selectOptions"
                  label-in-value
                  @change="handleChange"
                ></a-select>
                <FormOutlined style="margin-right: 10px" />
                <DeleteOutlined />
              </span> -->
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 82px;
                        font-size: 20px;
                      "
                >
                  {{ contract.totalCount }} 份
                </div>
                <div
                  style="width: 100%; padding: 0 5px; margin-bottom: 10px"
                >
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  全年退租合同面积: {{ contract.totalArea }} m²
                </div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                      <span style="flex: 1">
                        保证金余额
                        <!-- <QuestionCircleOutlined /> -->
                      </span>
                  <span>
                        <!-- <FormOutlined style="margin-right: 10px" /> -->
                    <!-- <DeleteOutlined /> -->
                      </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 82px;
                        font-size: 20px;
                      "
                >
                  {{ bondListWatch }}
                </div>
                <div
                  style="width: 100%; padding: 0 5px; margin-bottom: 10px"
                >
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  待退款: {{ retreatAmountWatch }}
                </div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                  <span style="flex: 1"> 合同到期提醒 </span>
                  <!-- <span>
                <a-select
                  v-model:value="contractValue"
                  style="width: 120px; margin-right: 10px"
                  :options="contractOptions"
                  label-in-value
                  @change="contractChange"
                ></a-select>
                <FormOutlined style="margin-right: 10px" />
                <DeleteOutlined />
              </span> -->
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 50px;
                        font-size: 20px;
                      "
                >
                  {{ contractList.expireArea }} m²
                </div>
                <div>到期提醒合同: {{ contractList.expireCount }} 份</div>
                <div style="width: 100%; padding: 0 5px; margin: 10px 0px">
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  到期未处理合同份数: {{ contractList.overdueCount }} 份
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>

        <a-col
          :span="24"
          v-show="getModuleShow('rental_income')"
          :order="getModuleOrder('rental_income')"
        >
          <a-row :gutter="[8, 8]">
            <a-col :span="12">
              <a-card
                style="height: 300px; padding: 10px"
                :hoverable="true"
              >
                <a-spin :spinning="spinning">
                  <a-row type="flex" :wrap="false">
                    <a-col flex="1">
                      <div class="head">
                        <span style="padding-right: 20px">租金收益</span>
                        <span>
                              <a-dropdown
                                :trigger="['click']"
                                v-model:visible="profitVisible"
                                @visibleChange="handleProfitVisibleChange"
                                :getPopupContainer="(triggerNode) => triggerNode?.parentNode"
                              >
                                <UnorderedListOutlined title="自定义列显示" />
                                <template #overlay>
                                  <a-menu>
                                    <a-checkbox-group
                                      v-model:value="profitList"
                                      @change="profitChange"
                                    >
                                      <a-menu-item
                                        v-for="item of profitData"
                                        :key="item.key"
                                      >
                                        <a-checkbox
                                          :value="item.key"
                                          :disabled="item.key == profitDisabled"
                                        >
                                          {{ item.name }}
                                        </a-checkbox>
                                      </a-menu-item>
                                    </a-checkbox-group>
                                  </a-menu>
                                </template>
                              </a-dropdown>
                            </span>
                      </div>
                      <a-row
                        class="mt-20"
                        v-if="customer_label !== '6214a41643137'"
                      >
                        <a-col style="color: #929292">累计租金收益</a-col>
                      </a-row>
                      <a-row v-if="customer_label !== '6214a41643137'">
                        <a-col
                          style="
                                font-size: 22px;
                                color: #000;
                                margin-bottom: 70px;
                              "
                        >{{ rentalData.incomeTotal }}</a-col
                        >
                      </a-row>
                      <a-row>
                        <a-col style="color: #929292">日均租金收益</a-col>
                      </a-row>
                      <a-row>
                        <a-col style="font-size: 22px; color: #000">{{
                            rentalData.incomeAvg
                          }}</a-col>
                      </a-row>
                    </a-col>
                    <a-col>
                      <a-row>
                        <a-space>
                          <a-radio-group
                            v-model:value="timeTxt"
                            button-style="outline"
                            @change="timeTxtChange"
                          >
                            <a-radio-button value="today"
                            >今日</a-radio-button
                            >
                            <a-radio-button value="month"
                            >本月</a-radio-button
                            >
                            <a-radio-button value="week"
                            >本季度</a-radio-button
                            >
                            <a-radio-button value="year"
                            >全年</a-radio-button
                            >
                          </a-radio-group>
                          <a-range-picker
                            v-model:value="profitDate"
                            @change="pickerChange"
                            :allowClear="false"
                          />
                        </a-space>
                      </a-row>
                      <a-col>
                        <div id="profitEcharts"></div>
                      </a-col>
                    </a-col>
                  </a-row>
                </a-spin>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card
                style="width: 100%; height: 300px; padding: 10px"
                :hoverable="true"
              >
                <a-spin :spinning="monthSpinning">
                  <a-row type="flex">
                    <a-col flex="1">
                      <div class="head">
                            <span style="padding-right: 20px"
                            >月租金收益走势</span
                            >
                        <span>
                              <a-dropdown
                                :trigger="['click']"
                                v-model:visible="monthlyRentVisible"
                                @visibleChange="monthlyRentVisibleChange"
                                :getPopupContainer="(triggerNode) => triggerNode?.parentNode"
                              >
                                <UnorderedListOutlined title="自定义列显示" />
                                <template #overlay>
                                  <a-menu>
                                    <a-checkbox-group
                                      v-model:value="monthlyRentList"
                                      @change="monthlyRentChange"
                                    >
                                      <a-menu-item
                                        v-for="item of monthlyRentData"
                                        :key="item.key"
                                      >
                                        <a-checkbox
                                          :value="item.key"
                                          :disabled="
                                            item.key == monthlyDisabled
                                          "
                                        >
                                          {{ item.name }}
                                        </a-checkbox>
                                      </a-menu-item>
                                    </a-checkbox-group>
                                  </a-menu>
                                </template>
                              </a-dropdown>
                            </span>
                      </div>
                    </a-col>
                    <a-col>
                      <a-range-picker
                        v-model:value="monthDate"
                        @change="monthPickerChange"
                        :allowClear="false"
                      />
                    </a-col>
                  </a-row>
                  <a-col>
                    <div id="monthChart"></div>
                  </a-col>
                  <!-- <a-row style="width:100%">

              </a-row> -->
                </a-spin>
              </a-card>
            </a-col>
          </a-row>
        </a-col>

        <a-col
          :span="24"
          v-show="getModuleShow('census_2')"
          :order="getModuleOrder('census_2')"
        >
          <a-row :gutter="[8, 8]">
            <a-col :span="8">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                  <span style="flex: 1"> 出租率 </span>
                  <!-- <span>
                <a-select
                  v-model:value="leaseValue"
                  style="width: 120px; margin-right: 10px"
                  :options="leaseOptions"
                  label-in-value
                  @change="leaseChange"
                ></a-select>
                <FormOutlined style="margin-right: 10px" />
                <DeleteOutlined />
              </span> -->
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 50px;
                        font-size: 20px;
                      "
                >
                  {{ rentalRate.rate }} %
                </div>
                <div>
                  在租实时均价: {{ rentalRate.actualPrice }} 元/m²·天
                </div>
                <div style="width: 100%; padding: 0 5px; margin: 10px 0">
                  <div class="linear"></div>
                </div>
                <div>总面积: {{ rentalRate.totalArea }} m²</div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                      <span style="flex: 1">
                        在租实时均价
                        <!-- <QuestionCircleOutlined /> -->
                      </span>
                  <span>
                        <!-- <FormOutlined style="margin-right: 10px" /> -->
                    <!-- <DeleteOutlined /> -->
                      </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 50px;
                        font-size: 20px;
                      "
                >
                  {{ rentList.actualPrice }} 元/m²·天
                </div>
                <div>
                  环比上月底:
                  <span style="color: green"
                  >{{ rentList.ratio }}%<CaretDownOutlined
                  /></span>
                </div>
                <div style="width: 100%; padding: 0 5px; margin: 10px 0">
                  <div class="linear"></div>
                </div>
                <div>
                  本月签约均价: {{ rentList.thisMonthActualPrice }} 元/m²·天
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="head">
                      <span style="flex: 1">
                        可招商面积
                        <!-- <QuestionCircleOutlined /> -->
                      </span>
                  <span>
                        <!-- <FormOutlined style="margin-right: 10px" /> -->
                    <!-- <DeleteOutlined /> -->
                      </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 50px;
                        font-size: 20px;
                      "
                >
                  {{ investmentArea.area }} m²
                </div>
                <div>可招商占比: {{ investmentArea.ratio }}%</div>
                <div style="width: 100%; padding: 0 5px; margin: 10px 0">
                  <div class="linear"></div>
                </div>
                <div>
                  可招商{{ $L("房源") }}数量: {{ investmentArea.count }}间
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>

        <a-col
          :span="12"
          v-show="getModuleShow('rental_rate')"
          :order="getModuleOrder('rental_rate')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">计租率 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="calculation"
                @change="renderCharts"
              />
            </a-col>
            <div id="echartsDate"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('month_rent_tread')"
          :order="getModuleOrder('month_rent_tread')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">月出租率走势 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="monthly"
                @change="monthlyEcharts"
              />
            </a-col>
            <div id="monthly"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('income_stream')"
          :order="getModuleOrder('income_stream')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">现金流 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                :placeholder="['开始日期', '结束日期']"
                format="YYYY-MM"
                :value="cashValue"
                :mode="cashMode"
                @panelChange="cashPanelChange"
                @change="cashChange"
              />
            </a-col>
            <div id="cashEcharts"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('rental_avg')"
          :order="getModuleOrder('rental_avg')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">计租均价 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="AverageMoment"
                @change="AverageRent"
                format="YYYY-MM"
              />
            </a-col>
            <div id="AverageRent"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('rental_average')"
          :order="getModuleOrder('rental_average')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">租金平效 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="RentEqualizationMoment"
                @change="RentEqualization"
              />
            </a-col>
            <div id="RentEqualization"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('collect_rate')"
          :order="getModuleOrder('collect_rate')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">分摊收缴率 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="shareRateMoment"
                @change="shareRate"
              />
            </a-col>
            <div id="shareRate"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('deal_tread')"
          :order="getModuleOrder('deal_tread')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">成交走势 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="dealMoment"
                @change="dealEcharts"
              />
            </a-col>
            <div id="dealEcharts"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('overdue_rank')"
          :order="getModuleOrder('overdue_rank')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">逾期排名 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="overdueMoment"
                @change="overdueRanking"
              />
            </a-col>
            <div
              id="overdueRanking"
              v-show="overdueRankingList.length"
            ></div>
            <Empty
              style="margin-top: 200px"
              :image="simpleImage"
              v-show="overdueRankingList.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('expire_tread')"
          :order="getModuleOrder('expire_tread')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">合同到期分布 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="contractMomoent"
                @change="contractExpire"
              />
            </a-col>
            <div id="contractExpire"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('income')"
          :order="getModuleOrder('income')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">收益</a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="profitMoment"
                @change="profitStatic"
              />
            </a-col>
            <div id="profitStatic"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('vacant_room_rank')"
          :order="getModuleOrder('vacant_room_rank')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name"
            >空置{{ $L("房源") }}空置天数排名</a-col
            >
            <a-col style="margin: 10px 0"> </a-col>
            <div id="vacantDays" v-show="vacantDaysList.length"></div>
            <Empty
              style="margin-top: 235px"
              :image="simpleImage"
              v-show="vacantDaysList.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('rental_loss_rank')"
          :order="getModuleOrder('rental_loss_rank')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">租金流失排名 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="rentLossMoment"
                @change="rentLoss"
              />
            </a-col>
            <div id="rentLoss" v-show="rentLossList.length"></div>
            <Empty
              style="margin-top: 200px"
              :image="simpleImage"
              v-show="rentLossList.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('house_tread')"
          :order="getModuleOrder('house_tread')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">全部{{ $L("房源") }}户型分布 </a-col>
            <div id="allListings"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('retreat_area_ratio')"
          :order="getModuleOrder('retreat_area_ratio')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">退租面积行业占比</a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="leasebackMoment"
                @change="leasebackArea"
              />
            </a-col>
            <div
              id="leasebackArea"
              style="margin-right: 50px"
              v-show="leasebackAreaLsit.length"
            ></div>
            <Empty
              style="margin-top: 200px"
              :image="simpleImage"
              v-show="leasebackAreaLsit.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('trade_analysis')"
          :order="getModuleOrder('trade_analysis')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">行业分析 </a-col>
            <div id="industryAnalysis" style="margin-right: 100px"></div>
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('retreat_reason_analysis')"
          :order="getModuleOrder('retreat_reason_analysis')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">退租原因分析 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="causeAnalysisMoment"
                @change="causeAnalysis"
              />
            </a-col>
            <div
              id="causeAnalysis"
              style="margin-right: 50px"
              v-show="causeAnalysisList.length"
            ></div>
            <Empty
              style="margin-top: 200px"
              :image="simpleImage"
              v-show="causeAnalysisList.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('vacant_room_ratio')"
          :order="getModuleOrder('vacant_room_ratio')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">空置天数占比 </a-col>
            <a-col style="margin: 10px 0">
              <a-range-picker
                v-model:value="vacantMment"
                @change="vacantEcharts"
              />
            </a-col>
            <div
              id="vacantEcharts"
              style="margin-right: 70px"
              v-show="vacantEchartsList.length"
            ></div>
            <Empty
              style="margin-top: 200px"
              :image="simpleImage"
              v-show="vacantEchartsList.length == 0"
            />
          </a-card>
        </a-col>
        <a-col
          :span="12"
          v-show="getModuleShow('label_analysis')"
          :order="getModuleOrder('label_analysis')"
        >
          <a-card style="height: 650px; padding: 10px">
            <a-col class="card-name">标签分析</a-col>
            <div
              id="labelAnalysis"
              style="margin-right: 100px; margin-top: 60px"
              v-show="vacantList.length"
            ></div>
            <Empty
              style="margin-top: 243px"
              :image="simpleImage"
              v-show="vacantList.length == 0"
            />
          </a-card>
        </a-col>

        <a-col
          :span="24"
          v-show="getModuleShow('census_3')"
          :order="getModuleOrder('census_3')"
        >
          <a-row :gutter="[8, 8]">
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 15px"
                :hoverable="true"
              >
                <div style="" class="heads">
                  <span style="flex: 1"> 当前计租率 </span>
                  <span> </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 75px;
                        font-size: 20px;
                      "
                >
                  {{ nowRentalRate.rentalRate }} %
                </div>
                <div
                  style="width: 100%; padding: 0 5px; margin-bottom: 10px"
                >
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  预计全年计租率: {{ nowRentalRate.forecastRentalRate }} %
                </div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="heads">
                  <span style="flex: 1"> 全年租金平效 </span>
                  <span> </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 50px;
                        font-size: 20px;
                      "
                >
                      <span>{{ annualRentList.rentAverage }}</span
                      >元/m²·天
                </div>
                <div style="margin-bottom: 20px">
                  全年计租均价: {{ annualRentList.rentEffect }} 元/m²·天
                </div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="heads">
                  <span style="flex: 1"> 今年实际现金流 </span>
                  <span> </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 43px;
                        font-size: 20px;
                      "
                >
                  {{ amountStreamWatch }}
                </div>
                <div style="display: flex">
                      <span style="flex: 1">
                        收入:
                        <span style="color: #ffa4a4">{{ incomeWatch }}</span>
                      </span>
                  <span>
                        支出:
                        <span style="color: #90e0c6">{{ payWatch }}</span>
                      </span>
                </div>
                <div
                  style="
                        width: 100%;
                        padding: 0 5px;
                        margin-bottom: 10px;
                        margin-top: 15px;
                      "
                >
                  <div class="linear"></div>
                </div>
                <div>全年现金流预测: {{ incomeStaticWatch }} (收入)</div>
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card
                style="height: 215px; padding: 10px"
                :hoverable="true"
              >
                <div style="" class="heads">
                  <span style="flex: 1"> 收缴率 </span>
                  <span> </span>
                </div>
                <div
                  style="
                        font-weight: 600;
                        margin-bottom: 19px;
                        font-size: 20px;
                      "
                >
                  {{ collectionRateList.paymentRate }} %
                </div>
                <div style="margin-bottom: 17px; width: 100%">
                  <div style="width: 100%">
                    <Progress
                      :percent="collectionRateList.paymentRate"
                      :show-info="false"
                    />
                  </div>
                  <div>
                    逾期未结清租客数:
                    {{ collectionRateList.overDueOwnerCount }}
                  </div>
                </div>
                <div
                  style="width: 100%; padding: 0 5px; margin-bottom: 10px"
                >
                  <div class="linear"></div>
                </div>
                <div style="margin-bottom: 20px">
                  逾期未结清账单金额: {{ overDueBillAmountWatch }}
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <!-- 自定义筛选字段 -->
    <sortList
      :visible="srotVisible"
      @cancel="closeClick"
      @succes="succesClick"
    />

  </div>
</template>

<script>
import {
  defineComponent,
  onActivated,
  onMounted,
  onUnmounted,
  onBeforeMount,
  ref,
  computed,
  watch,
  nextTick,
  onDeactivated,
  createVNode,
  reactive,
  toRefs,
} from "vue";
import request from "@/common/utils/request";
import store from "@/store/index";
import {
  FireFilled,
  CheckSquareOutlined,
  PlusOutlined,
  InsertRowAboveOutlined,
  CaretDownOutlined,
  DownloadOutlined,
  UnorderedListOutlined,
  CloudDownloadOutlined,
  ExclamationCircleOutlined,
  CloseOutlined,
  CopyOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { Empty, message, Modal, Progress } from "ant-design-vue";
import { useRouter } from "vue-router";
import { Chart } from "@antv/g2";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
import sortList from "@/views/home/modules/sortList.vue";
import QrcodeVue from "qrcode.vue";
import BLCOMMON from "bl-common-vue3";

import ExpireRemind from "@/views/home/modules/ExpireRemind.vue";
import ExpireRemindMessage from "@/views/home/modules/ExpireRemindMessage.vue";
import _ from "lodash";

const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  name: "homeOverviewProject",
  components: {
    ExpireRemind,
    CheckSquareOutlined,
    Empty,
    PlusOutlined,
    InsertRowAboveOutlined,
    FireFilled,
    CaretDownOutlined,
    Progress,
    DownloadOutlined,
    UnorderedListOutlined,
    sortList,
    QrcodeVue,
    CloudDownloadOutlined,
    CloseOutlined,
    CopyOutlined,
    ExpireRemindMessage,
    SettingOutlined,
  },
  setup() {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);

    const $router = useRouter();

    // 指定天数可收益账单
    const radio = ref("owner_id");

    // 我的看板 -- 管理面积
    const ManagementArea = ref({});
    // 我的看板 -- 保证金余额
    const bondList = ref({});
    const bondListWatch = computed(() => {
      return String(parseInt(bondList.value.totalAmount)).length < 5
        ? Number(bondList.value.totalAmount) + " " + "元"
        : String(parseInt(bondList.value.totalAmount)).length > 8
          ? Number(bondList.value.totalAmount / 100000000).toFixed(2) + " " + "亿"
          : Number(bondList.value.totalAmount / 10000).toFixed(2) + " " + "万元";
    });
    const retreatAmountWatch = computed(() => {
      return String(parseInt(bondList.value.retreatAmount)).length < 5
        ? Number(bondList.value.retreatAmount) + " " + "元"
        : String(parseInt(bondList.value.retreatAmount)).length > 8
          ? Number(bondList.value.retreatAmount / 100000000).toFixed(2) +
          " " +
          "亿"
          : Number(bondList.value.retreatAmount / 10000).toFixed(2) +
          " " +
          "万元";
    });
    // 我的看板 -- 全年退租合同
    const contract = ref({});
    // 我的看板 -- 可招商面积
    const investmentArea = ref({});
    // 我的看板 -- 在租实时均价
    const rentList = ref({});
    // 我的看板 -- 合同到期
    const contractList = ref({});
    // 我的看板 -- 出租率
    const rentalRate = ref({});

    // 我的看板 -- 数据
    const bulletinList = () => {
      request.get("/org", "/myBoard/index").then((res) => {
        bondList.value = res.returnData.bondStatic;
        contract.value = res.returnData.retreatStatic;
        investmentArea.value = res.returnData.rentabelArea;
        rentList.value = res.returnData.ringRatio;
        contractList.value = res.returnData.contractExpire;
        rentalRate.value = res.returnData.rentalRate;
      });
    };
    bulletinList();

    // 我的看板-- 全年退租合同
    const selectValue = ref({
      value: "lucy",
    });

    const selectOptions = ref([
      {
        value: "jack",
        label: "Jack (100)",
      },
      {
        value: "lucy",
        label: "Lucy (101)",
      },
    ]);

    const handleChange = (value) => {
      console.log(value);
    };

    // 我的看板-- 合同到期
    const contractValue = ref({
      value: "lucy",
    });

    const contractOptions = ref([
      {
        value: "jack",
        label: "Jack (100)",
      },
      {
        value: "lucy",
        label: "Lucy (101)",
      },
    ]);

    const contractChange = (value) => {
      console.log(value);
    };

    // 我的看板-- 出租率到期
    const leaseValue = ref({
      value: "lucy",
    });

    const leaseOptions = ref([
      {
        value: "jack",
        label: "Jack (100)",
      },
      {
        value: "lucy",
        label: "Lucy (101)",
      },
    ]);

    const leaseChange = (value) => {
      console.log(value);
    };

    // 标签分析

    watch(
      () => store.getters.buildingInfo,
      (info) => {
        const { checkedBuildings } = info;
        console.log(
          "checkedBuildingscheckedBuildingscheckedBuildings",
          checkedBuildings
        );
      }
    );

    // 自定义展示
    const srotVisible = ref(false);
    const custom = () => {
      srotVisible.value = true;
    };
    const closeClick = () => {
      srotVisible.value = false;
    };
    const moduleInit = ref([]);
    const getModuleShow = (key) => {
      const result = moduleInit.value.find((item) => item.key == key);
      return result && result.show;
    };
    const getModuleOrder = (key) => {
      if (moduleInit.value && moduleInit.value.length) {
        return moduleInit.value.findIndex((item) => item.key == key) + 1;
      }
      return 1000;
    };
    const succesClick = () => {
      srotVisible.value = false;
      request.get("/org", "/workbench/moduleInit").then((res) => {
        moduleInit.value = res.moduleInit;
        console.log(moduleInit.value);
      });
    };
    succesClick();

    // 租金收益
    const profit = {};
    const profitVisible = ref(false);
    let filter = [];
    const handleProfitVisibleChange = (visiable) => {
      if (visiable == false) {
        filter = profitList.value.filter((item) => {
          return item;
        });
        if (filter.length == 0) {
          message.warn("最少选一个楼宇");
          return;
        }
        if (filter.length >= 6) {
          profitList.value = profitList.value.map((item, index) => {
            if (index < 5) {
              return item;
            }
          });
          message.warn("最多只能选择五个楼宇");
          return;
        }
        profit.chart.clear();
        profitEcharts();
      }
    };
    const rentalData = ref({});
    const profitList = ref([]);
    let profitDisabled = ref(0);
    const profitChange = (profit) => {
      if (profit.length == 1) {
        profitDisabled.value = profit[0];
      } else {
        profitDisabled.value = 0;
      }
    };
    const profitData = ref([]);
    const profitDataList = () => {
      return new Promise((resolve, reject) => {
        request.get("/org", "/myBoard/buildSetList").then((res) => {
          profitData.value = res.list;
          profitList.value = res.list.map((item, index) => {
            if (index < 5) {
              return item.key;
            }
          });
          profitList.value = profitList.value.filter((item, index) => {
            if (index < 5) {
              return item;
            }
          });
          resolve();
        });
      })
    };
    // 日期选择
    const profitDate = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const timeTxt = ref();
    const pickerValue = ref();
    const timeTxtChange = (e) => {
      profit.chart.clear();
      if (e.target.value == "today") {
        // 今天
        profitDate.value = [moment().startOf("day"), moment()];
        profitEcharts();
        return;
      }
      if (e.target.value == "week") {
        // 本季度
        profitDate.value = [
          moment().startOf("quarter"),
          moment().endOf("quarter"),
        ];
        profitEcharts();
        return;
      }
      if (e.target.value == "month") {
        // 本月
        profitDate.value = [
          moment().startOf("months"),
          moment().endOf("months"),
        ];
        profitEcharts();
        return;
      }
      if (e.target.value == "year") {
        // 全年
        profitDate.value = [moment().dayOfYear(1), moment().dayOfYear(365)];
        profitEcharts();
        return;
      }
    };
    const pickerChange = (picker, value) => {
      timeTxt.value = "";
      profit.chart.clear();
      profitEcharts();
    };
    // 数据可视化
    const spinning = ref(false);
    const profitEcharts = () => {
      if (!profit.chart) {
        profit.chart = new Chart({
          container: "profitEcharts",
          autoFit: true,
          height: 240,
          padding: [0, 200, 0, 0],
        });
      }
      spinning.value = true;
      request
        .post("/org", "/board/rentalIncome", {
          buildIds: profitList.value,
          startTime: profitDate.value[0].format("YYYY-MM-DD"),
          endTime: profitDate.value[1].format("YYYY-MM-DD"),
        })
        .then((res) => {
          res.returnData.percentList.forEach((item) => {
            item.build_id = String(item.build_id);
          });
          rentalData.value = res.returnData;
          // 新建一个 view 用来单独渲染Annotation
          profit.chart.coordinate("theta", {
            radius: 0.8,
            innerRadius: 0.8,
          });

          profit.chart.changeData(res.returnData.percentList);
          profit.chart
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "租金收益",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content:
                String(parseInt(rentalData.value.incomeBuild)).length < 5
                  ? Number(rentalData.value.incomeBuild)
                  : String(parseInt(rentalData.value.incomeBuild)).length > 8
                    ? Number(rentalData.value.incomeBuild / 100000000).toFixed(2)
                    : Number(rentalData.value.incomeBuild / 10000).toFixed(2),
              style: {
                fontSize: 24,
                fill: "#272727",
                textAlign: "center",
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content:
                String(parseInt(rentalData.value.incomeBuild)).length < 5
                  ? "元"
                  : String(parseInt(rentalData.value.incomeBuild)).length > 8
                    ? "亿"
                    : "万元",
              style: {
                fontSize: 24,
                fill: "#272727",
                textAlign: "center",
              },
              offsetY: 10,
              offsetX: 50,
            });

          // 声明需要进行自定义图例字段： 'item'
          profit.chart.legend("build_id", {
            position: "right", // 配置图例显示位置
            // itemGap:200,
            offsetX: -80,
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.returnData.percentList.map((obj, index) => {
              return {
                name: obj.build_name + `  ` + "￥" + obj.incomeAmount, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "circle", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: profit.chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `${val}%`, // 格式化 itemValue 内容
            },
          });

          profit.chart
            .interval()
            .adjust("stack")
            .position("percent")
            .color("build_id")
            .style({
              fillOpacity: 1,
            })
            .tooltip("build_name*incomeAmount", (item, percent) => {
              return {
                name: item,
                value: percent,
              };
            });
          // .state({
          //   active: {
          //     style: (element) => {
          //       const shape = element.shape;
          //       return {
          //         lineWidth: 10,
          //         stroke: shape.attr("fill"),
          //         strokeOpacity: shape.attr("fillOpacity"),
          //       };
          //     },
          //   },
          // });

          // 移除图例点击过滤交互
          profit.chart.removeInteraction("legend-filter");
          profit.chart.interaction("element-active");
          profit.chart.render();
        })
        .finally(() => {
          spinning.value = false;
        });
    };
    const buildDisabled = ref(0);
    const onCheckItemChange = (build) => {
      if (build.length == 1) {
        buildDisabled.value = build[0];
      } else {
        buildDisabled.value = 0;
      }
    };
    const areaStaticList = (buildList) => {
      request
        .post("/org", "/myBoard/areaStatic", { buildIds: buildList })
        .then((res) => {
          ManagementArea.value = res.returnData;
        });
    };
    const handleColVisibleChange = (visiable) => {
      if (visiable == false) {
        if (buildList.value.length == 0) {
          message.warn("至少选择一个楼宇");
          return;
        }
        areaStaticList(buildList.value);
      }
    };

    // 筛选管理面积
    const colVisible = ref(false);
    const columnsData = ref([]);
    const buildList = ref([]);
    const columnsList = () => {
      request.get("/org", "/myBoard/buildSetList").then((res) => {
        columnsData.value = res.list;
        buildList.value = res.list.map((item) => {
          return item.key;
        });
        areaStaticList(buildList.value);
      });
    };
    columnsList();

    // 月租金收益走势
    const monthlyRentVisible = ref(false);
    let monthlyFilter = [];
    const monthlyRentVisibleChange = (visiable) => {
      if (visiable == false) {
        monthlyFilter = monthlyRentList.value.filter((item) => {
          return item;
        });
        if (monthlyFilter.length == 0) {
          message.warn("最少选一个楼宇");
          return;
        }
        if (monthlyFilter.length >= 6) {
          monthlyRentList.value = monthlyRentList.value.map((item, index) => {
            if (index < 5) {
              return item;
            }
          });
          message.warn("最多只能选择五个楼宇");
          return;
        }
        console.log(monthlyFilter);
        monthRentall(monthlyFilter, undefined, undefined);
      }
    };
    const monthlyRentList = ref([]);
    const monthlyDisabled = ref(0);
    const monthlyRentChange = (checkbox) => {
      if (checkbox.length == 1) {
        monthlyDisabled.value = checkbox[0];
      } else {
        monthlyDisabled.value = 0;
      }
    };
    const monthlyRentData = ref([]);
    const monthDate = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyDataList = () => {
      return new Promise((resolve, reject) => {
        request.get("/org", "/myBoard/buildSetList").then((res) => {
          monthlyRentData.value = res.list;
          monthlyRentList.value = res.list.map((item, index) => {
            if (index < 5) {
              return item.key;
            }
          });
          monthlyRentList.value = monthlyRentList.value.filter((item, index) => {
            if (index < 5) {
              return item;
            }
          });
          resolve();
        });
      })
    };
    const monthPickerChange = (picker, value) => {
      monthRentall(monthlyRentList.value, value[0], value[1]);
    };
    const monthSpinning = ref(false);
    const monthRentall = (buildIds, startTime, endTime) => {
      if (!profit.monthChart) {
        profit.monthChart = new Chart({
          container: "monthChart",
          autoFit: true,
          height: 240,
        });
      }
      monthSpinning.value = true;
      request
        .post("/org", "/board/monthRentalIncome", {
          buildIds: buildIds,
          startTime: startTime || monthDate.value[0].format("YYYY-MM-DD"),
          endTime: endTime || monthDate.value[1].format("YYYY-MM-DD"),
        })
        .then((res) => {
          if (!_.isEmpty(res)) {
            profit.monthChart.changeData(res.treadList);
            profit.monthChart.scale({
              monthDate: {
                min: 0,
                range: [0, 1],
                nice: true,
              },
              incomeTotal: {
                min: 0,
                nice: true,
              },
            });
            profit.monthChart.annotation().text({
              // position: ["-2%", "-20%"],
              content: "元",
              style: {
                fill: "#8c8c8c",
                fontWeight: 300,
              },
              offsetY: -150,
              offsetX: -15,
            });

            profit.monthChart.tooltip({
              showCrosshairs: true,
              shared: true,
            });
            profit.monthChart.legend("buildName", {
              position: "top",
            });
            profit.monthChart.axis("incomeTotal", {
              label: {
                formatter: (val) => {
                  return val;
                },
              },
            });
            profit.monthChart.axis("monthDate", {
              label: {
                rotate: -1,
                offset: 30,
              },
              tickLine: null,
            });

            profit.monthChart
              .line()
              .position("monthDate*incomeTotal")
              .color("buildName")
              .shape("smooth");

            profit.monthChart.render();
          }
        })
        .finally(() => {
          monthSpinning.value = false;
        });
    };

    // 记租率
    const calculation = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const chartMap = {};
    const renderCharts = () => {
      if (!chartMap.chart1) {
        chartMap.chart1 = new Chart({
          container: "echartsDate",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartMap.chart1.scale({
          rentalRate: {
            max: 100,
            min: 0,
            nice: true,
          },
          monthDate: {
            tickCount: 20,
          },
        });
        chartMap.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        chartMap.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        chartMap.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartMap.chart1.axis("rentalRate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartMap.chart1.axis("monthDate", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartMap.chart1
          .area()
          .position("monthDate*rentalRate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartMap.chart1
          .line()
          .position("monthDate*rentalRate")
          .shape("smooth")
          .color("name");
        chartMap.chart1.legend(false);
      }
      request
        .get("/org", "/board/rentalRate", {
          start_time: calculation.value[0].format(dateFormat),
          end_time: calculation.value[1].format(dateFormat),
        })
        .then((res) => {
          chartMap.chart1.changeData(res.list);
          chartMap.chart1.render();
        });
    };

    // 月出租率走势
    const chartmonthly = {};
    const monthly = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const monthlyEcharts = () => {
      if (!chartmonthly.chart1) {
        chartmonthly.chart1 = new Chart({
          container: "monthly",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        chartmonthly.chart1.scale({
          rentalRate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        chartmonthly.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });

        chartmonthly.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        chartmonthly.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
        });

        chartmonthly.chart1.axis("rentalRate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });

        chartmonthly.chart1.axis("monthDate", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        chartmonthly.chart1
          .area()
          .position("monthDate*rentalRate")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        chartmonthly.chart1
          .line()
          .position("monthDate*rentalRate")
          .color("name")
          .shape("smooth");
        chartmonthly.chart1.legend(false);
      }
      request
        .get("/org", "/board/monthRentalRate", {
          start_time: monthly.value[0].format(dateFormat),
          end_time: monthly.value[1].format(dateFormat),
        })
        .then((res) => {
          chartmonthly.chart1.changeData(res.list);
          chartmonthly.chart1.render();
        });
    };

    //现金流 Echarts
    const cashMode = ref(["month", "month"]);
    const cashValue = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const cashChange = (val) => {
      cashValue.value = val;
    };
    const cashPanelChange = (val, mode) => {
      cashValue.value = val;
      cashMode.value = [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1],
      ];
      cash(val[0].format("YYYY-MM"), val[1].format("YYYY-MM"));
    };

    const chartCash = {};
    const cash = (start_date, end_date) => {
      if (!chartCash.chart1) {
        chartCash.chart1 = new Chart({
          container: "cashEcharts",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        chartCash.chart1.tooltip({
          showMarkers: false,
        });
        chartCash.chart1.interaction("active-region");
        chartCash.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 725,
        });

        chartCash.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        chartCash.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });

        chartCash.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        chartCash.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
          position: "left",
        });
        chartCash.chart1.axis("net_amount", {
          position: "left",
          animate: true,
          label: {
            formatter: (val) => {
              return +val / 10 + ".00";
            },
          },
        });
        chartCash.chart1.scale({
          amount: {
            min: 0,
            nice: true,
          },
          net_amount: {
            min: 0,
            nice: true,
          },
        });
        chartCash.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .size(10)
          .color("name", (val) => {
            if (val === "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .adjust([
            {
              type: "dodge",
              marginRatio: 0.5,
            },
          ]);

        chartCash.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
        chartCash.chart1
          .area()
          .position("date*net_amount")
          .color("net_name")
          .shape("smooth");
      }
      request
        .get("/org", "/board/cashFlow", {
          start_date: start_date
            ? start_date
            : moment().dayOfYear(1).format("YYYY-MM"),
          end_date: end_date
            ? end_date
            : moment().dayOfYear(365).format("YYYY-MM"),
        })
        .then((res) => {
          const data = res.list;
          let listCash = data.filter((item) => !item.net_name);
          let newListCash = listCash.map((item) => item.amount);

          let listNewCash = data.filter((item) => item.net_name);
          let listsCash = listNewCash.map((itme) => itme.net_amount);
          let arrCash = Math.max(...newListCash, ...listsCash);
          chartCash.chart1.annotation().text({
            content:
              String(parseInt(arrCash)).length < 5
                ? "元"
                : String(parseInt(arrCash)).length > 8
                  ? "亿"
                  : "万元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -32,
          });
          chartCash.chart1.scale({
            amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrCash),
              min: 0,
              nice: true,
            },
          });
          chartCash.chart1.changeData(data);
          chartCash.chart1.render();
        });
    };

    // 计租均价 Echarts
    const Averag = {};
    const AverageMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const AverageRent = (date) => {
      if (!Averag.chart1) {
        Averag.chart1 = new Chart({
          container: "AverageRent",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        Averag.chart1.scale({
          rentAverage: {
            // max: 3.5,
            nice: true,
          },
        });
        Averag.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        Averag.chart1.annotation().text({
          content: "元/m²/天",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -40,
        });
        Averag.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        Averag.chart1.axis("rentAverage", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });

        Averag.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        Averag.chart1
          .area()
          .position("date*rentAverage")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        Averag.chart1
          .line()
          .position("date*rentAverage")
          .shape("smooth")
          .color("name");
        Averag.chart1.legend(false);
        Averag.chart1.render();
      }
      request
        .get("/org", "/board/rentAverage", {
          start_date: AverageMoment.value[0].format(dateFormat),
          end_date: AverageMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          Averag.chart1.changeData(res.list);
          Averag.chart1.render();
        });
    };

    // 租金平效 Echarts
    const lization = {};
    const RentEqualizationMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const RentEqualization = () => {
      if (!lization.chart1) {
        lization.chart1 = new Chart({
          container: "RentEqualization",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        lization.chart1.scale({
          rentEffect: {
            nice: true,
          },
        });
        lization.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        lization.chart1.annotation().text({
          content: "元/m²/天",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -40,
        });
        lization.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        lization.chart1.axis("rentEffect", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });

        lization.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        lization.chart1
          .area()
          .position("date*rentEffect")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        lization.chart1
          .line()
          .position("date*rentEffect")
          .shape("smooth")
          .color("name");
        lization.chart1.legend(false);
      }
      request
        .get("/org", "/board/rentEffect", {
          start_date: RentEqualizationMoment.value[0].format(dateFormat),
          end_date: RentEqualizationMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          lization.chart1.changeData(res.list);
          lization.chart1.render();
        });
    };

    // 分摊收缴率
    const share = {};
    const shareRateMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const shareRate = (date) => {
      if (!share.chart1) {
        share.chart1 = new Chart({
          container: "shareRate",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        share.chart1.scale({
          rate: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        share.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        share.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -17,
        });
        share.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "年",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: -30,
          // offsetX: -20,
        });

        share.chart1.axis("rate", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val + "%";
            },
          },
        });

        share.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        share.chart1.legend({
          position: "top-right",
        });

        share.chart1.line().position("date*rate").color("name").shape("smooth");
      }
      request
        .get("/org", "/board/collectionRate", {
          startDate: shareRateMoment.value[0].format(dateFormat),
          endDate: shareRateMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          share.chart1.changeData(res.list);
          share.chart1.render();
        });
    };

    // 成交走势
    const deal = {};
    const dealMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const dealEcharts = () => {
      if (!deal.chart1) {
        deal.chart1 = new Chart({
          container: "dealEcharts",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        deal.chart1.scale({
          total: {
            nice: true,
          },
        });
        deal.chart1.tooltip({
          showCrosshairs: true,
          shared: false,
        });
        deal.chart1.annotation().text({
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -20,
        });
        deal.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "年",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        deal.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return val.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
          },
        });

        deal.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        deal.chart1
          .area()
          .position("date*total")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        deal.chart1.line().position("date*total").shape("smooth").color("name");
        deal.chart1.legend(false);
      }
      request
        .get("/org", "/board/dealTread", {
          start_date: dealMoment.value[0].format(dateFormat),
          end_date: dealMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          deal.chart1.changeData(res.list);
          deal.chart1.render();
        });
    };

    const ranking = {};
    const overdueMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const overdueRankingList = ref([]);
    const overdueRanking = () => {
      if (!ranking.chart1) {
        ranking.chart1 = new Chart({
          container: "overdueRanking",
          autoFit: true,
          width: 800,
          height: 500,
          padding: [90, 120, 90, 150],
        });
        ranking.chart1.scale({
          total: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        ranking.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            // offsetY:10,
            offset: 15,
          },
        });
        ranking.chart1.coordinate().transpose();
        ranking.chart1.annotation().text({
          content: "租客名",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -335,
          offsetX: -30,
        });

        ranking.chart1.annotation().text({
          position: ["103%", "100%"],
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 540,
        });

        ranking.chart1.tooltip({
          showMarkers: false,
        });
        ranking.chart1.legend(false);
        ranking.chart1.interaction("active-region");
        ranking.chart1
          .interval()
          .position("owner*percent")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
      }
      request
        .get("/org", "/board/overdueRank", {
          start_date: overdueMoment.value[0].format(dateFormat),
          end_date: overdueMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          overdueRankingList.value = res.list;
          ranking.chart1.changeData(res.list);
          ranking.chart1.render();
        });
    };

    // 合同到期分布
    const contractSpread = {};
    const contractMomoent = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const contractExpire = () => {
      if (!contractSpread.chart1) {
        contractSpread.chart1 = new Chart({
          container: "contractExpire",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        contractSpread.chart1.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        contractSpread.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });
        contractSpread.chart1.axis("total", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
          },
        });
        contractSpread.chart1.annotation().text({
          content: "份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -18,
        });
        contractSpread.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });

        contractSpread.chart1.tooltip({
          showMarkers: false,
        });
        contractSpread.chart1.interaction("active-region");

        contractSpread.chart1
          .interval()
          .position("date*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        contractSpread.chart1.legend({
          position: "top-right",
        });
        contractSpread.chart1.legend(false);
      }
      request
        .get("/org", "/board/overdueContractSpread", {
          start_date: contractMomoent.value[0].format(dateFormat),
          end_date: contractMomoent.value[1].format(dateFormat),
        })
        .then((res) => {
          contractSpread.chart1.changeData(res.list);
          contractSpread.chart1.render();
        });
    };

    // 收益
    const profitChart = {};
    const profitMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const profitStatic = (date) => {
      if (!profitChart.chart1) {
        profitChart.chart1 = new Chart({
          container: "profitStatic",
          autoFit: true,
          height: 500,
          padding: [70],
        });

        profitChart.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        profitChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0.5,
          // offsetX: 720,
        });
        profitChart.chart1.axis("amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
          position: "left",
        });
        profitChart.chart1.axis("net_amount", {
          animate: true,
          label: {
            formatter: (val) => {
              return val + ".00";
            },
          },
          position: "left",
        });
        profitChart.chart1.legend("name", {
          position: "right-top",
          layout: "horizontal",
        });
        profitChart.chart1.legend("net_name", {
          position: "right-top",
          layout: "horizontal",
        });

        profitChart.chart1.tooltip({
          showMarkers: false,
        });
        profitChart.chart1.interaction("active-region");

        profitChart.chart1
          .interval()
          .position("date*amount")
          .style({ radius: [20, 20, 0, 0] })
          .color("name", (val) => {
            if (val == "支出") {
              return "red";
            }
            return "#6294f9";
          })
          .size(20);
        profitChart.chart1
          .line()
          .position("date*net_amount")
          .color("net_name")
          .style({ radius: [20, 20, 0, 0] });
      }
      request
        .get("/org", "/board/profitStatic", {
          start_date: profitMoment.value[0].format(dateFormat),
          end_date: profitMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          const data = res.list;
          let listProfit = data.filter((item) => item.amount);
          let newListProfit = listProfit.map((item) => item.amount);

          let listNewProfit = data.filter((item) => item.net_amount);
          let listsCashProfit = listNewProfit.map((itme) => itme.net_amount);
          let arrCashProfit = Math.max(...newListProfit, ...listsCashProfit);

          profitChart.chart1.annotation().text({
            content:
              String(parseInt(arrCashProfit)).length < 5
                ? "元"
                : String(parseInt(arrCashProfit)).length > 8
                  ? "亿"
                  : "万元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -380,
            offsetX: -33,
          });
          profitChart.chart1.scale({
            amount: {
              max: Number(arrCashProfit),
              min: 0,
              nice: true,
            },
            net_amount: {
              max: Number(arrCashProfit),
              min: 0,
              nice: true,
            },
          });
          profitChart.chart1.changeData(res.list);
          profitChart.chart1.render();
        });
    };

    // 空置房源空置天数排名
    const vacantDaysList = ref([]);
    const vacantDays = () => {
      if (!profitChart.chart2) {
        profitChart.chart2 = new Chart({
          container: "vacantDays",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 150],
        });
      }

      let data = [];
      request.get("/org", "/board/roomVacantRank").then((res) => {
        vacantDaysList.value = res.list;
        data = res.list;
        profitChart.chart2.data(data);
        profitChart.chart2.scale({
          days: {
            min: 0,
            nice: true,
          },
        });
        profitChart.chart2.axis("days", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offsetX: -10,
          },
        });
        profitChart.chart2.axis("roomName", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });
        profitChart.chart2.annotation().text({
          position: ["102%", "100%"],
          content: "天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 560,
        });
        profitChart.chart2.coordinate().transpose();

        profitChart.chart2.tooltip({
          showMarkers: false,
        });
        profitChart.chart2.axis({
          label: {
            rotate: -1,
          },
        });
        profitChart.chart2.legend(false);
        profitChart.chart2.interaction("active-region");
        profitChart.chart2
          .interval()
          .position("roomName*days")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        profitChart.chart2.render();
      });
    };

    // 租金流失排名
    const rentLossChart = {};
    const rentLossMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const rentLossList = ref([]);
    const rentLoss = () => {
      if (!rentLossChart.chart1) {
        rentLossChart.chart1 = new Chart({
          container: "rentLoss",
          autoFit: true,
          width: 800,
          height: 500,
          padding: [90, 150],
        });
        rentLossChart.chart1.scale({
          totals: {
            nice: true,
          },
        });
        rentLossChart.chart1.axis("totals", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
              // .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
            rotate: -1,
            offset: 1,
            offsetX: -10,
          },
        });
        rentLossChart.chart1.coordinate().transpose();

        rentLossChart.chart1.tooltip({
          showMarkers: false,
        });
        rentLossChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "元",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 570,
        });
        rentLossChart.chart1.axis({
          label: {
            rotate: -1,
          },
        });

        rentLossChart.chart1.interaction("active-region");
        rentLossChart.chart1
          .interval()
          .position("roomName*totals")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        rentLossChart.chart1.legend(false);
      }
      request
        .get("/org", "/source/rentLossRank", {
          startDate: rentLossMoment.value[0].format(dateFormat),
          endDate: rentLossMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          rentLossList.value = res.list;
          rentLossChart.chart1.changeData(res.list);
          rentLossChart.chart1.render();
        });
    };

    // 全部房源户型分布
    const allListings = () => {
      if (!rentLossChart.chart2) {
        rentLossChart.chart2 = new Chart({
          container: "allListings",
          autoFit: true,
          height: 500,
          padding: [80],
        });
      }
      let data = [];
      request.get("/org", "/source/roomTypeSpread").then((res) => {
        data = res.list;
        rentLossChart.chart2.data(data);
        rentLossChart.chart2.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        rentLossChart.chart2.axis("groupName", {
          label: {
            rotate: -1,
            offset: 35,
          },
          tickLine: null,
        });
        rentLossChart.chart2.annotation().text({
          content: "个",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -20,
        });
        rentLossChart.chart2.annotation().text({
          position: ["102%", "100%"],
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        rentLossChart.chart2.tooltip({
          showMarkers: false,
        });
        rentLossChart.chart2.interaction("active-region");

        rentLossChart.chart2
          .interval()
          .position("groupName*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        rentLossChart.chart2.legend({
          position: "top-right",
        });
        rentLossChart.chart2.legend(false);

        rentLossChart.chart2.render();
      });
    };

    // 退租面积行业占比
    const leaseback = {};
    const leasebackMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const leasebackAreaLsit = ref([]);
    const leasebackArea = () => {
      if (!leaseback.chart1) {
        leaseback.chart1 = new Chart({
          container: "leasebackArea",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 20, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        leaseback.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        leaseback.chart1.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });
        // 移除图例点击过滤交互
        leaseback.chart1.removeInteraction("legend-filter");
        leaseback.chart1.interaction("element-active");
      }
      request
        .get("/org", "/board/retreatIndustryRatio", {
          start_date: leasebackMoment.value[0].format(dateFormat),
          end_date: leasebackMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          leasebackAreaLsit.value = res.list;
          leaseback.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "m²",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });
          // 声明需要进行自定义图例字段： 'item'
          leaseback.chart1.legend("industryName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.industryName + obj.totalArea, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  style: {
                    r: 5, // marker 图形半径
                    fill: leaseback.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          leaseback.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("industryName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });
          leaseback.chart1.changeData(res.list);
          leaseback.chart1.render();
        });
    };

    // 行业分析
    const industryAnalysis = () => {
      if (!leaseback.chart2) {
        leaseback.chart2 = new Chart({
          container: "industryAnalysis",
          autoFit: true,
          height: 500,
          padding: [80, 20, 80, 0],
        });
      }
      let data = [];
      request.get("/org", "/board/industryAnalyse").then((res) => {
        data = res.list;
        leaseback.chart2.data(data);

        // 新建一个 view 用来单独渲染Annotation
        leaseback.chart2.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        leaseback.chart2.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        leaseback.chart2.legend("industryName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.industryName + `           ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: leaseback.chart2.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        leaseback.chart2
          .interval()
          .adjust("stack")
          .position("percent")
          .color("industryName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        leaseback.chart2.removeInteraction("legend-filter");
        leaseback.chart2.interaction("element-active");
        leaseback.chart2.render();
      });
    };

    // 退租原因分析
    const causeChart = {};
    const causeAnalysisList = ref([]);
    const causeAnalysisMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const causeAnalysis = () => {
      if (!causeChart.chart1) {
        causeChart.chart1 = new Chart({
          container: "causeAnalysis",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 200, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        causeChart.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        causeChart.chart1.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 移除图例点击过滤交互
        causeChart.chart1.removeInteraction("legend-filter");
        causeChart.chart1.interaction("element-active");
      }
      request
        .get("/org", "/board/retreatAnalyse", {
          start_date: causeAnalysisMoment.value[0].format(dateFormat),
          end_date: causeAnalysisMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          causeAnalysisList.value = res.list;
          causeChart.chart1.data(res.list);
          causeChart.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "m²",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });

          // 声明需要进行自定义图例字段： 'item'
          causeChart.chart1.legend("name", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.name + obj.total, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "square", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: causeChart.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),
            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          causeChart.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("name")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });
          causeChart.chart1.render();
        });
    };

    // 空置天数占比
    const vacantChart = {};
    const pickerVacant = ref("date");
    const vacantMment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const vacantEchartsList = ref([]);
    const vacantEcharts = () => {
      if (!vacantChart.chart1) {
        vacantChart.chart1 = new Chart({
          container: "vacantEcharts",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 20, 80, 0],
        });
      }
      request
        .get("/org", "/board/freeRoomRatio", {
          start_date: vacantMment.value[0].format(dateFormat),
          end_date: vacantMment.value[1].format(dateFormat),
        })
        .then((res) => {
          vacantEchartsList.value = res.list;
          // 新建一个 view 用来单独渲染Annotation
          vacantChart.chart1.coordinate("theta", {
            radius: 0.65,
            innerRadius: 0.8,
          });

          vacantChart.chart1.changeData(res.list);
          vacantChart.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "个",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });

          // 声明需要进行自定义图例字段： 'item'
          vacantChart.chart1.legend("groupName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.groupName + `     ` + obj.groupNum, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "square", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: vacantChart.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),

            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          vacantChart.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("groupName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });

          // 移除图例点击过滤交互
          vacantChart.chart1.removeInteraction("legend-filter");
          vacantChart.chart1.interaction("element-active");
          vacantChart.chart1.render();
        });
    };

    // 标签分析
    const vacantList = ref([]);
    const labelAnalysis = () => {
      if (!vacantChart.chart2) {
        vacantChart.chart2 = new Chart({
          container: "labelAnalysis",
          autoFit: true,
          height: 500,
          width: 700,
          padding: [80, 200, 80, 0],
        });
      }

      let data = [];
      request.get("/org", "/board/tagAnalyse").then((res) => {
        vacantList.value = res.list;
        data = res.list;
        // 新建一个 view 用来单独渲染Annotation
        vacantChart.chart2.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        vacantChart.chart2.data(data);
        vacantChart.chart2.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        vacantChart.chart2.legend("tagName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.tagName + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: vacantChart.chart2.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        vacantChart.chart2
          .interval()
          .adjust("stack")
          .position("percent")
          .color("tagName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        vacantChart.chart2.removeInteraction("legend-filter");
        vacantChart.chart2.interaction("element-active");
        vacantChart.chart2.render();
      });
    };

    // 当前记租率列表
    const nowRentalRate = ref([]);
    const nowRentalRateList = () => {
      request.get("/org", "/board/nowRentalRate").then((res) => {
        nowRentalRate.value = res.list;
      });
    };
    nowRentalRateList();
    // 全年租金平效
    const annualRentList = ref([]);
    const annualRent = () => {
      request.get("/org", "/board/nowRentEffect").then((res) => {
        annualRentList.value = res.list;
      });
    };
    annualRent();
    // 今年实际现金流
    const cashFlowList = ref({});
    const incomeStaticWatch = computed(() => {
      return String(parseInt(cashFlowList.value.expectIncome)).length < 5
        ? Number(cashFlowList.value.expectIncome).toFixed(2) + " " + "元"
        : String(parseInt(cashFlowList.value.expectIncome)).length > 8
          ? Number(cashFlowList.value.expectIncome / 100000000).toFixed(2) +
          " " +
          "亿"
          : Number(cashFlowList.value.expectIncome / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const amountStreamWatch = computed(() => {
      return String(parseInt(cashFlowList.value.amountStream)).length < 5
        ? Number(cashFlowList.value.amountStream) + " " + "元"
        : String(parseInt(cashFlowList.value.amountStream)).length > 8
          ? Number(cashFlowList.value.amountStream / 100000000).toFixed(2) +
          " " +
          "亿"
          : Number(cashFlowList.value.amountStream / 10000).toFixed(2) +
          " " +
          "万元";
    });
    const incomeWatch = computed(() => {
      return String(parseInt(cashFlowList.value.income)).length < 5
        ? Number(cashFlowList.value.income) + " " + "元"
        : String(parseInt(cashFlowList.value.income)).length > 8
          ? Number(cashFlowList.value.income / 100000000).toFixed(2) + " " + "亿"
          : Number(cashFlowList.value.income / 10000).toFixed(2) + " " + "万元";
    });
    const payWatch = computed(() => {
      return String(parseInt(cashFlowList.value.pay)).length < 5
        ? Number(cashFlowList.value.pay) + " " + "元"
        : String(parseInt(cashFlowList.value.pay)).length > 8
          ? Number(cashFlowList.value.pay / 100000000).toFixed(2) + " " + "亿"
          : Number(cashFlowList.value.pay / 10000).toFixed(2) + " " + "万元";
    });
    const cashFlow = () => {
      request.get("/org", "/asset/incomeStatic").then((res) => {
        cashFlowList.value = res;
      });
    };
    cashFlow();
    // 收缴率
    const collectionRateList = ref({});
    const overDueBillAmountWatch = computed(() => {
      return String(parseInt(collectionRateList.value.overDueBillAmount))
        .length < 5
        ? Number(collectionRateList.value.overDueBillAmount).toFixed(2) +
        " " +
        "元"
        : String(parseInt(collectionRateList.value.overDueBillAmount)).length >
        8
          ? Number(
            collectionRateList.value.overDueBillAmount / 100000000
          ).toFixed(2) +
          " " +
          "亿"
          : Number(collectionRateList.value.overDueBillAmount / 10000).toFixed(
            2
          ) +
          " " +
          "万元";
    });
    const collectionRate = () => {
      request.get("/org", "/asset/paymentRate").then((res) => {
        collectionRateList.value = res;
      });
    };
    collectionRate();

    const activeKey = ref("1");

    onMounted(() => {
      setTimeout(() => {
        nextTick(() => {
          const e = new Event("resize");
          window.dispatchEvent(e);
          profitDataList().then(() => {
            profitEcharts();
          })
          monthlyDataList().then(() => {
            monthRentall(monthlyRentList.value, undefined, undefined);
          })
          cash();
          shareRate();
          rentLoss();
          dealEcharts();
          AverageRent();
          contractExpire();
          renderCharts();
          profitStatic();
          vacantDays();
          allListings();
          causeAnalysis();
          vacantEcharts();
          labelAnalysis();
          leasebackArea();
          overdueRanking();
          monthlyEcharts();
          RentEqualization();
          industryAnalysis();
        });
      }, 500);
    });
    onUnmounted(() => {
      if (profit.chart) {
        profit.chart.destroy();
      }

      if (profit.monthChart) {
        profit.monthChart.destroy();
      }
      if (chartCash.chart1) {
        chartCash.chart1.destroy();
      }
      if (share.chart1) {
        share.chart1.destroy();
      }
      if (rentLossChart.chart1) {
        rentLossChart.chart1.destroy();
      }
      if (deal.chart1) {
        deal.chart1.destroy();
      }
      if (Averag.chart1) {
        Averag.chart1.destroy();
      }
      if (contractSpread.chart1) {
        contractSpread.chart1.destroy();
      }
      if (chartMap.chart1) {
        chartMap.chart1.destroy();
      }
      if (profitChart.chart1) {
        profitChart.chart1.destroy();
      }
      if (causeChart.chart1) {
        causeChart.chart1.destroy();
      }
      if (vacantChart.chart1) {
        vacantChart.chart1.destroy();
      }
      if (leaseback.chart1) {
        leaseback.chart1.destroy();
      }
      if (ranking.chart1) {
        ranking.chart1.destroy();
      }
      if (chartmonthly.chart1) {
        chartmonthly.chart1.destroy();
      }
      if (lization.chart1) {
        lization.chart1.destroy();
      }
      if (leaseback.chart2) {
        leaseback.chart2.destroy();
      }
      if (vacantChart.chart2) {
        vacantChart.chart2.destroy();
      }
      if (rentLossChart.chart2) {
        rentLossChart.chart2.destroy();
      }
      if (profitChart.chart2) {
        profitChart.chart2.destroy();
      }
    });

    const customer_label = computed(() => {
      return store.getters.basicConfig.customer_label;
    });

    // 是否特殊机构
    const isSpecialOrg = computed(() => {
      return store.getters.orgInfo && store.getters.orgInfo.org_special;
    });

    const config = computed(() => store.getters.basicConfig);


    return {
      activeKey,
      radio,
      simpleImage,
      selectValue,
      selectOptions,
      handleChange,
      contractValue,
      contractChange,
      contractOptions,
      leaseChange,
      leaseOptions,
      leaseValue,
      ManagementArea,
      bondList,
      contract,
      investmentArea,
      rentList,
      contractList,
      rentalRate,
      bondListWatch,
      retreatAmountWatch,
      custom,
      onCheckItemChange,
      columnsData,
      colVisible,
      handleColVisibleChange,
      buildList,
      profitVisible,
      handleProfitVisibleChange,
      profitList,
      profitData,
      profitChange,
      rentalData,
      timeTxt,
      pickerValue,
      pickerChange,
      timeTxtChange,
      profitDate,
      profitEcharts,
      spinning,
      monthlyRentData,
      monthlyRentChange,
      monthlyRentList,
      monthlyRentVisibleChange,
      monthlyRentVisible,
      monthDate,
      monthPickerChange,
      monthSpinning,
      srotVisible,
      closeClick,
      succesClick,
      getModuleShow,
      getModuleOrder,
      calculation,
      renderCharts,
      monthlyEcharts,
      monthly,
      cashPanelChange,
      cashChange,
      cashValue,
      cashMode,
      AverageMoment,
      AverageRent,
      RentEqualization,
      RentEqualizationMoment,
      shareRate,
      shareRateMoment,
      dealEcharts,
      dealMoment,
      overdueRanking,
      overdueRankingList,
      overdueMoment,
      contractExpire,
      contractMomoent,
      profitStatic,
      profitMoment,
      vacantDaysList,
      rentLoss,
      rentLossList,
      rentLossMoment,
      leasebackArea,
      leasebackAreaLsit,
      leasebackMoment,
      causeAnalysisMoment,
      causeAnalysis,
      causeAnalysisList,
      vacantMment,
      vacantEcharts,
      vacantEchartsList,
      vacantList,
      overDueBillAmountWatch,
      payWatch,
      incomeWatch,
      amountStreamWatch,
      incomeStaticWatch,
      annualRentList,
      nowRentalRate,
      collectionRateList,
      profitDisabled,
      buildDisabled,
      monthlyDisabled,
      customer_label,
      config,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(th.column-money, ) {
  text-align: center !important;
}
:deep(td.column-money) {
  text-align: center !important;
}
:deep(th.column-days) {
  text-align: right !important;
}
:deep(td.column-days) {
  text-align: right !important;
}
.workbench-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: hidden;
}
.workbench {
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  .action-box {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 1;
  }
}
.tags {
  height: 24px;
  background-color: #fff1c0;
  padding: 5px 10px;
  border-radius: 5px;
  color: #ff9329;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0;
}
:deep(.ant-card-body) {
  padding: 0;
}

.box {
  width: 535px;
  margin-left: 10px;
  margin-bottom: 10px;
  :deep(.ant-table-thead > tr > th) {
    background: #ffff;
  }
  .radio {
    position: absolute;
    top: 18px;
    left: 355px;
  }
  .card-title {
    display: flex;
    justify-content: space-between;
  }
}
.btnClick {
  position: absolute;
  top: 16px;
  left: 180px;
}
:deep(.ant-card-head) {
  padding: 0 12px;
}
.grid {
  cursor: pointer;
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.head {
  margin-bottom: 10px;
  display: flex;
}
:deep(.ant-table-title) {
  padding: 1px 10px;
}
// .conduct {
//   :deep(.ant-card-head) {
//     padding: 0 24px;
//   }
// }
.card-name {
  font-size: 18px;
  font-weight: 600;
}
.remind {
  width: 500px;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .remind-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
  }
  .remind-text {
    font-size: 15px;
  }
}
.remind-qrcode {
  width: 105px;
  height: 105px;
  border: 4px solid #000;
  img {
    width: 100%;
    height: 100%;
  }
}
.icon {
  margin-top: 10px;
  font-weight: 700;
  font-size: 28px;
}
.text-phone {
  font-size: 16px;
  font-weight: 700;
}
.phone {
  font-size: 20px;
  font-weight: 700;
}
.col-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .contract-box {
    height: 170px;
    width: 100%;
    margin-bottom: 16px;
  }
  .equipment-box {
    width: 100%;
    flex: 1;
  }
}
.icon-primary {
  color: @primary-color;
}
.work-view {
  display: flex;
  .work-view-icon {
    width: 30px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  //width: 30px;
  //height: 100%;
  //background-color: #faad14;
}
.setting-icon {
  &:hover {
    color: #40a9ff;
  }
}
.action-button {
  padding: 3px 8px;
  height: fit-content!important;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
:deep(.ant-checkbox-group){
  max-height: 400px;
  overflow: hidden auto;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
</style>
